<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<body>
    <input type="text" placeholder="请输入数字1" id="i1"> <br>
    <input type="text" placeholder="请输入数字2" id="i2"> <br>
    <button onclick="calc('+')">加</button>
    <button onclick="calc('-')">减</button>
    <button onclick="calc('*')">乘</button>
    <button onclick="calc('/')">除</button>
    <h4>运算结果:<span></span></h4>

    <script>
        function calc(o){
            //获取用户在输入框中输入的两个数字
            //document.getElementById('id值') 获取对应id值的元素
            //元素.value 获取元素的值
            let n1 = document.getElementById('i1').value;
            let n2 = document.getElementById('i2').value;
            //.value拿到的是string类型的数据，需要转为数字类型
            n1 = parseFloat(n1);
            n2 = parseFloat(n2);
            //检查用户输入的是否为数字，如果不是，弹窗提示
            if(isNaN(n1) || isNaN(n2)){
                alert('请输入数字!')
            }
            //console.log(n1,n2);
            //document.querySelector('span');获取对应选择器的元素
            let span = document.querySelector('span');
            //span.innerHTML 修改对应html的内容
            //span.innerHTML = n1*n2;
            switch(o){
                case '+' :
                    span.innerHTML = n1+n2;break;
                case '-' :
                    span.innerHTML = n1-n2;break;
                case '*' :
                    span.innerHTML = n1*n2;break;
                case '/' :
                    if(n2!=0){
                        span.innerHTML = n1/n2;
                    }else{
                        alert('除数不能为0！')
                    }
            }
        }
    </script>
</body>
</html>